<template>
    <div id="app">
        <!--    顶部模糊查询-->
        <div class="tou" v-if="topInputShow">
            <label>单元名称</label>
            <el-input v-model="unitName" style="width: 200px;height: 32px"></el-input>
            <label>单元编码</label>
            <el-input v-model="unitCode" style="width: 200px;height: 32px"></el-input>
<!--            <label>是否有电梯</label>-->
<!--            <el-input v-model="unitHaveElevator" style="width: 200px;height: 32px"></el-input>-->
            <label>是否有电梯</label>
            <el-select v-model="unitHaveElevator" placeholder="请选择" clearable>
                <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in stateUnitList"></el-option>
            </el-select>
            <label>所属楼栋</label>
            <el-select v-model="buildinges" placeholder="请选择" clearable>
                <el-option
                    v-for="item in buildings"
                    :key="item.buildingId"
                    :label="item.buildingName"
                    :value="item.buildingId">
                </el-option>
            </el-select>
            <el-button type="success" @click="localUnit(1)" style="width: 93px;height: 35px;line-height: 10px" icon="el-icon-search">搜索</el-button>
            <el-button type="danger" style="width: 93px;height: 35px;line-height: 10px" @click="reset" icon="el-icon-refresh">重置</el-button>
            <!--  按钮行-->
        </div>
        <div class="but">
            <el-button type="warning" @click="add" style="width: 93px;height: 35px;line-height: 10px" icon="el-icon-plus">添加</el-button>
            <el-button type="primary" @click="selectUpdate()" style="width: 93px;height: 35px;line-height: 10px" icon="el-icon-edit" :disabled="upd">修改</el-button>
            <el-button type="success" @click="deleteUnits"  style="width: 93px;height: 35px;line-height: 10px" icon="el-icon-delete" :disabled="del">删除</el-button>
            <el-button type="info" @click="outExe" style="width: 93px;height: 35px;line-height: 10px;" icon="el-icon-download">导出</el-button>
        </div>
        <el-row  class="btn-circle">
            <div>
                <el-tooltip content="隐藏搜索框" placement="top">
                    <a-tooltip>
                        <el-button size="small" icon="el-icon-search" circle @click="topInputShows"></el-button>
                    </a-tooltip>
                </el-tooltip>
                <el-tooltip content="刷新页面" placement="top">
                    <a-tooltip>
                        <el-button size="small" icon="el-icon-refresh" circle @click="toIndex"></el-button>
                    </a-tooltip>
                </el-tooltip>

            </div>
        </el-row>

        <el-table
                class="tab"
                :data="units"
                id="lzy"
                style="width: 100%"
                @selection-change="selectChange"
        >
            <el-table-column
                    width="50"
                    type="selection">
            </el-table-column>
            <el-table-column
                label="序号"
                type="index"
                width="50"
                align="center">
            </el-table-column>
            <el-table-column
                    label="小区名称"
                    width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.communityName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="楼栋"
                width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.buildingName  }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="单元名称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.unitName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="层数"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.unitLevel }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="建筑面积"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.unitAcreage }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="是否有电梯"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.unitHaveElevator }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 0px">{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="备注"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            icon="el-icon-edit"
                            type="text"
                            size="mini"
                            @click="updateUnit(scope.row)"
                    >更新</el-button>
                    <el-button
                            icon="el-icon-delete"
                            size="mini"
                            type="text"
                            @click="deleteUnit(scope.row.unitId)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <!--      <el-pagination-->
            <!--          background-->
            <!--          layout="prev, pager, next"-->
            <!--          :page-size="size"-->
            <!--          :total="total"-->
            <!--          @current-change="localBuilding">-->
            <!--      </el-pagination>-->

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="localUnit"
                    :current-page="current"
                    :page-sizes="[size]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog title="添加" :visible.sync="unitAddVisible">
            <el-form >
<!--                小区-->
                <el-form-item label="楼栋" >
                    <el-select v-model="unit.buildingId" placeholder="请选择">
                        <el-option
                            v-for="item in buildings"
                            :key="item.buildingId"
                            :label="item.buildingName"
                            :value="item.buildingId">
                        </el-option>
                    </el-select>
                    <!--                    <el-input v-model="unit.buildingName" ></el-input>-->
                </el-form-item>
<!--                楼栋-->
<!--                <el-form-item label="小区" >-->
<!--                    <el-select v-model="unit.communityId" placeholder="请选择">-->
<!--                        <el-option-->
<!--                            v-for="item in communities"-->
<!--                            :key="item.communityId"-->
<!--                            :label="item.communityName"-->
<!--                            :value="item.communityId">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--&lt;!&ndash;                    <el-input v-model="unit.buildingName" ></el-input>&ndash;&gt;-->
<!--                </el-form-item>-->

                <el-form-item label="单元名" >
                    <el-input v-model="unit.unitName" ></el-input>
                </el-form-item>
                <el-form-item label="单元编号" >
                    <el-input v-model="unit.unitCode" ></el-input>
                </el-form-item>
                <el-form-item label="层数" >
                    <el-input v-model="unit.unitLevel" ></el-input>
                </el-form-item>
                <el-form-item label="建筑面积" >
                    <el-input v-model="unit.unitAcreage" ></el-input>
                </el-form-item>
                <el-form-item label="是否有电梯" >
                    <el-select v-model="unit.unitHaveElevator" placeholder="请选择" clearable>
                        <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in stateUnitList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间" >
                    <el-date-picker
                            v-model="unit.createTime"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                    <!--          <el-input v-model="building.createTime" ></el-input>-->
                </el-form-item>

                <el-form-item label="备注" >
                    <el-input v-model="unit.remark" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="unitAddVisible = false" v-on:click="savaUnit">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="更新" :visible.sync="unitUpdateVisible">
            <el-form >
                <el-form-item label="楼栋" >
                    <el-select v-model="unit.buildingId" placeholder="请选择">
                        <el-option
                            v-for="item in buildings"
                            :key="item.buildingId"
                            :label="item.buildingName"
                            :value="item.buildingId">
                        </el-option>
                    </el-select>
                    <!--                    <el-input v-model="unit.buildingName" ></el-input>-->
                </el-form-item>
                <el-form-item label="小区" >
                    <el-select v-model="unit.communityId" placeholder="请选择">
                        <el-option
                            v-for="item in communities"
                            :key="item.communityId"
                            :label="item.communityName"
                            :value="item.communityId">
                        </el-option>
                    </el-select>
                    <!--                    <el-input v-model="unit.buildingName" ></el-input>-->
                </el-form-item>
                <el-form-item label="单元名" >
                    <el-input v-model="unit.unitName" ></el-input>
                </el-form-item>
                <el-form-item label="单元编号" >
                    <el-input v-model="unit.unitCode" ></el-input>
                </el-form-item>
                <el-form-item label="层数" >
                    <el-input v-model="unit.unitLevel" ></el-input>
                </el-form-item>
                <el-form-item label="建筑面积" >
                    <el-input v-model="unit.unitAcreage" ></el-input>
                </el-form-item>
                <el-form-item label="是否有电梯" >
                    <el-select v-model="unit.unitHaveElevator" placeholder="请选择" clearable>
                        <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in stateUnitList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="修改时间" >
                    <el-date-picker
                            v-model="unit.updateTime"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                    <!--          <el-input v-model="building.createTime" ></el-input>-->
                </el-form-item>

                <el-form-item label="备注" >
                    <el-input v-model="unit.remark" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="unitUpdateVisible = false" v-on:click="savaUnit">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import axios, {options} from "axios";
import * as XLSX from "xlsx";
import FileSaver from "file-saver";

export default {
    name: "ZyUnitView",
    data(){
        return {
            topInputShow:true,
            units:null,
            unitAddVisible:false,//添加
            unitUpdateVisible:false,//修改,
            current:1,
            size:5,
            pages:0,
            total:0,
            unitName:"",
            unitCode:"",
            unitHaveElevator:"",
            buildingId:"",
            buildingName:"",
            communities:"",
            buildings:"",
            buildinges:"",
            stateUnitList:[],
            upd:true,
            del:true,
            ids:[],
            unit:{
                unitId:0,
                communityId:"",
                buildingId:"",
                communityName:"",
                buildingName:"",
                unitName:"",
                unitLevel:"",
                unitAcreage:"",
                unitHaveElevator:"",
                createTime:"",
                remark:"",
            },
            currentZyCommunityId:"",

        }
    },


    methods:{
        localUnit(current){
            this.current = current;
            this.axios.get("unit-page?current="+this.current+"&size="+this.size+"&unitName="+this.unitName+"&unitCode="+this.unitCode+"&unitHaveElevator="
                +this.unitHaveElevator+"&buildingId="+this.buildinges+"&communityId="+this.currentZyCommunityId)
                .then(result =>{
                    this.units = result.data.data.records;
                    this.pages = result.data.data.pages;
                    this.total = result.data.data.total;
                    console.log(this.units)
                    // alert(this.buildings[3].buildingId)
                })
            this.communityList();
            this.buildingList();
        },
        deleteUnit(unitId){
            this.axios.delete("unit/"+unitId)
                .then(result =>{
                    console.log(result.data);
                    if (result.data.code == 200){
                        this.localUnit(this.current);
                    }

                })
        },
        //批量删除
        deleteUnits() {
            this.axios.delete("units/" + this.ids)
                .then(res => {
                    if (res.data.code == 200) {
                        this.localUnit(this.current);
                    }
                })
        },
        //多选框选择后点击修改
        //选中修改
        selectUpdate(){
            this.axios.get("unit/"+this.ids)
                .then(result =>{
                    console.log(result.data.data)
                    this.unit = result.data.data;
                })
            this.unitUpdateVisible = true;
        },

        selectChange(selection){
            this.ids = selection.map(item => item.unitId)
            this.upd = selection.length!=1
            this.del = !selection.length
        },

        outExe(){
            this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {

                    this.exportExcel();
                })
                .catch(() => {});
        },
        exportExcel() {
            //转换成excel时，使用原始的格式
            var xlsxParam = { raw: true };
            let fix = document.querySelector(".el-table__fixed");
            let wb;
            //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
            if (fix) {
                wb = XLSX.utils.table_to_book(
                    document.querySelector("#lzy").removeChild(fix),xlsxParam);
                document.querySelector("#lzy").appendChild(fix);
            } else {
                wb = XLSX.utils.table_to_book(document.querySelector("#lzy"),xlsxParam);
            }
            var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
            });
            try {
                FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx");
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
        },
        add(){
            this.empty()
            this.unitAddVisible = true;
            this.unit.communityId = this.currentZyCommunityId

        },
        communityList(){
            this.axios.get("communityList")
                .then(res => {
                    this.communities = res.data.data;
                })
        },
        buildingList(){
            this.axios.get("buildingList")
                .then(res => {
                    this.buildings = res.data.data;
                })

        },
        updateUnit(uint){
            this.unitUpdateVisible = true;
            this.unit = JSON.parse(JSON.stringify(uint));
        },
        handleSizeChange(size) {
            console.log(`每页 ${size} 条`);
        },
        //   字典联动
        loadUnitDictList() {
            this.axios.get("/sysDictData/getBySysDictTypeName/" + "sys_yes_no")
                .then(result => {
                    this.stateUnitList = result.data.data
                })
        },
        reset(){
            this.unitName = ""
            this.unitCode=""
            this.unitHaveElevator=""
            this.buildingId=""
            this.$router.go(0)
        },
        topInputShows(){
            this.topInputShow= !this.topInputShow;
        },
        toIndex(){
            this.$router.go(0)
        },
        savaUnit(){
            if (this.unit.unitId == 0){
                this.axios.post("unit",this.unit)
                    .then(result =>{
                        console.log(result.data);
                        if (result.data.code == 200){
                            this.localUnit(this.current);
                        }
                    })
            }else{
                this.axios.put("unit",this.unit)
                    .then(result =>{
                        console.log(result.data);
                        if (result.data.code == 200){
                            this.localUnit(this.current);
                        }
                    })
            }
            this.unit = {
                unitId:0,
                communityId:"",
                buildingId:"",
                communityName:"",
                buildingName:"",
                unitName:"",
                unitLevel:"",
                unitAcreage:"",
                unitHaveElevator:"",
                createTime:"",
                remark:"",
            }
        },
        empty(){
            this.unit = {
                unitId:0,
                communityId:"",
                buildingId:"",
                communityName:"",
                buildingName:"",
                unitName:"",
                unitLevel:"",
                unitAcreage:"",
                unitHaveElevator:"",
                createTime:"",
                remark:"",

            }
        },
        // 联动
        setCurrentZyCommunity(id){
            this.currentZyCommunityId=id
            this.localUnit(1)
        }
    },
    mounted(){
        this.localUnit(1);
        //   获取菜单状态字典
        this.loadUnitDictList();
        // 联动
        this.$bus.$on('mainCurrentCommunityChange',(id)=>{
            this.setCurrentZyCommunity(id)
        });
    }
}
</script>

<style scoped>
.but{
    position: absolute;
    margin-top: 58px;
}
.tou{

    position: relative;

}
.tab{
    position: absolute;
    margin-top: 100px;
}
.page{
    position: absolute;
    float: right;
    margin-top: 430px;
    margin-left: 1000px;
}
.btn-circle{
  position: relative;
    margin-left: 1500px;
}

</style>